<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <link rel="stylesheet" href="/rzwl/me/static/index.css">
    <link rel="stylesheet" href="/rzwl/components/tabbar/index.css">
</head>
<body>
    <div id="me_app">
        <div v-if="userInfo">
            <div style="height:40px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 0 15px;">
                <div style="display: flex; align-items: center;">
                    <img :src="userInfo.headimgurl" alt="头像" style="width: 40px; height: 40px; border-radius: 50%;">
                    <span style="padding-left: 15px;"> [[ userInfo.nickname ]]</span>
                </div>
                <button @click="logout" style="background-color: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px;">一键登出</button>
            </div>

        </div>
        <div v-else>
            <p>正在获取用户信息或未登录...</p>
            <button @click="redirectToWechatAuth">点击登录</button>
        </div>

        <div class="order-section" v-if="userInfo">
            <h2>我的订单</h2>
            <div class="tabs">
                <div :class="{ 'tab-item': true, 'active': currentTab === 'pending' }" @click="currentTab = 'pending'">待支付</div>
                <div :class="{ 'tab-item': true, 'active': currentTab === 'paid' }" @click="currentTab = 'paid'">已支付</div>
                <div :class="{ 'tab-item': true, 'active': currentTab === 'refunded' }" @click="currentTab = 'refunded'">已退款</div>
            </div>

            <div v-if="currentTab === 'pending'" class="order-list">
                <div v-if="pendingOrders.length > 0">
                    <div v-for="order in pendingOrders" :key="order.order_id" class="order-card">
                        <div style="height:20px;"></div>
                        <div class="order-info-row">
                            <span class="order-label">订单ID:</span>
                            <span class="order-value">[[ order.order_id ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">培训班:</span>
                            <span class="order-value">[[ order.training_class_name ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">价格:</span>
                            <span class="order-value price">¥[[ order.price.toFixed(2) ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">状态:</span>
                            <span class="order-value status-pending">待支付</span>
                            
                        </div>
                        <button class="pay-button" @click="goToPayPage(order.order_id)">去支付</button>
                    </div>
                </div>
                <p v-else>暂无待支付订单。</p>
            </div>

            <div v-if="currentTab === 'paid'" class="order-list">
                <div v-if="paidOrders.length > 0">
                    <div v-for="order in paidOrders" :key="order.order_id" class="order-card">
                        <div class="order-info-row">
                            <span class="order-label">订单ID:</span>
                            <span class="order-value">[[ order.order_id ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">培训班:</span>
                            <span class="order-value">[[ order.training_class_name ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">价格:</span>
                            <span class="order-value price">¥[[ order.price.toFixed(2) ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">状态:</span>
                            <span class="order-value status-paid">已支付</span>
                        </div>
                    </div>
                </div>
                <p v-else>暂无已支付订单。</p>
            </div>

            <div v-if="currentTab === 'refunded'" class="order-list">
                <div v-if="refundedOrders.length > 0">
                    <div v-for="order in refundedOrders" :key="order.order_id" class="order-card">
                        <div class="order-info-row">
                            <span class="order-label">订单ID:</span>
                            <span class="order-value">[[ order.order_id ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">培训班:</span>
                            <span class="order-value">[[ order.training_class_name ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">价格:</span>
                            <span class="order-value price">¥[[ order.price.toFixed(2) ]]</span>
                        </div>
                        <div class="order-info-row">
                            <span class="order-label">状态:</span>
                            <span class="order-value status-refunded">已退款</span>
                        </div>
                    </div>
                </div>
                <p v-else>暂无已退款订单。</p>
            </div>
        </div>

        <tabbar-component></tabbar-component>
    </div>

    <div style="width:100%; height:20px; color: red;"></div>
    <div style="width:100%; height:80px"></div>

    <script>
        // 从后端Jinja2模板获取APP_ID
        window.WECHAT_APP_ID = "{{ APP_ID }}";
    </script>
    <script src="/rzwl/static/vue@2.6.14/dist/vue.min.js"></script>
    <script src="/rzwl/components/tabbar/index.js"></script>
    <script src="/rzwl/static/js/axios.min.js"></script>
    <script src="/rzwl/me/static/index.js"></script>
</body>
</html>
